<template>
    <div>
        <el-card shadow="never" style="margin-top: 15px;">
            <el-form :inline="true">
                <el-form-item label="分类名称:">
                    <el-input v-model="IMG.paramFrom.name" placeholder="请输入内容"></el-input>

                </el-form-item>
                <br>
                <el-form-item label="文件名称:">
                    <el-input v-model="IMG.paramFrom.fileName" placeholder="请输入内容"></el-input>

                </el-form-item>
                <br>
                <el-form-item label="文件类型:">
                  <el-select v-model="IMG.paramFrom.type" placeholder="请选择" size="medium">
                    <el-option key="" label="全部" value=""></el-option>
                    <el-option
                      v-for="item in IMG.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                
            </el-form>
        </el-card>

      <el-card shadow="never" style="margin-top: 5px;">
          <el-row type="flex" justify="end" style="margin-bottom: 15px;">
            <el-button type="primary" size="mini" @click="IMG.fn.add()">新增</el-button>
           
          </el-row>
      <el-table border :data="IMG.tableData" style="width: 100%">
        <el-table-column
      type="selection"
      width="35">
    </el-table-column>
        <el-table-column prop="id" align="center" label="id" width="300px" />
        <el-table-column prop="name" align="center" label="name" width="100px" />
        <el-table-column prop="type" align="center" label="type" width="80px" />
        <el-table-column prop="fileName" align="center" label="fileName" width="200px" />
        
        <el-table-column prop="orderIndex" align="center" label="排序" width="80px" />
        <el-table-column prop="" align="center" label="图标" width="100px">
          <template v-slot="{ row }">
            <img :src= "imgBaseUrl + row.id" width="30px"/>
          </template>
        </el-table-column>
        
        <el-table-column prop="" align="center" label="状态" width="80px">
          <template v-slot="{ row }">
            <span v-if = "row.isActive" style = "color:green">启用</span>
            <span v-if = "!row.isActive" style = "color:red">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="操作" width="240px" >
        <template v-slot="{ row }">
            <!-- <el-button type="warning" size="mini" @click="IMG.fn.modify(row)" style="margin: 3px;">编辑</el-button> -->
            <el-button type="danger" size="mini" @click="IMG.fn.del(row.id)" style="margin: 3px;">删除</el-button>
            <el-button v-if = "!row.isActive" type="success" size="mini" @click="IMG.fn.active(row.id,1)" style="margin: 3px;">启用</el-button>
            <el-button v-if = "row.isActive"  type="danger" size="mini" @click="IMG.fn.active(row.id,0)" style="margin: 3px;">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page-size="IMG.query.pageSize" 
        :total="IMG.total" 
        :currentPage="IMG.currentPage"
        @size-change="IMG.fn.handleSizeChange"
        @current-change="IMG.fn.handleCurrentChange" />
      <imgAdd ref="imgAdd" 
        :dialogTitle="IMG.dialogTitle" 
        :dialog-visible.sync="IMG.dialogVisible" 
        :form="IMG.form" 
        :options="IMG.options"
        :data="IMG"
        @getStaffList="IMG.fn.getInfo" />
    </el-card>

    </div>
</template>
<script>
import imgAdd from './imgAdd.vue'
import paging from '@/components/paging.vue'
import {  
  IMGApi,
} from "./imgIndex.js";
import baseData from '@/baseData'
import Cookies from 'js-cookie'
import { TOKEN_KEY } from "@/constants/KEY";
import axios from 'axios'
export default {
    name: 'img',
    components: {
      paging,
      imgAdd,
    },
    data() {
      return {
       imgBaseUrl:baseData.basePathUser+'/tbFile/fileById?id=',
      IMG:{
        dialogTitle:'新增1',
        dialogVisible: false,
        form:{},
        action:baseData.basePathAdmin+"/tbFile/add",
        paramFrom:{
          fileName:'',
          name:'',
          type:'',
        },
        tableData:[],
        options: [
            {
                lable:'svg',
                value:'svg'
            },
            {
                lable:'png',
                value:'png'
            }
        ],
        query:{
          pageSize:10,
          page:1
        },
        currentPage:1,
        total:0,
        fn:{}, 
       },
  
       header: {
        Authentication: Cookies.get(TOKEN_KEY),
        'Content-Type': 'multipart/form-data',
       },
      }
    },
  
    mounted() {
      window.common = this
      this.IMG.fn =this.IMGfn()
      this.IMG.fn.init()
      this.IMG.fn.getInfo()
    },
    watch:{
      'IMG.paramFrom': {
        handler(newValue, oldValue) {
          this.IMG.fn.query()
          //console.log('User changed:', newValue);
        },
        // 是否在选项声明时立即触发
        immediate: false,
        // 是否深度监听
        deep: true
      },
      
    },
    methods: {
      handleClick(tab, event) {
        //console.log(tab, event);
      },
      
      IMGfn(){
        const that = this;
        let that_data = that.IMG
        const that_api = IMGApi()
        const fn = {
          init(){
            that_data = that.IMG
          },
          async active(id,isActive){
            const res = await that_api.active({id,isActive})
            that.$message({
                    type: 'info',
                    message: res
                  })
            that_data.fn.getInfo();
          },
          async activeTypeSupplier(typeSupplierId,isActive){

            let info ;
            if(isActive){
              info = {
                msg:'启用时，会将此品种的其他数据源禁用，确定吗？',
                title:'启用',
              }
              
            }else{
              info = {
                msg:'禁用后，门户将无法看到此品种，确定吗？',
                title:'禁用',
              }
            }
            that.$confirm(info.msg, info.title, {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await that_api.activeTypeSupplier({typeSupplierId,isActive})
              that.$message({
                      type: 'info',
                      message: res
                    })
              that_data.fn.getInfo();
              
            }).catch(() => {
              that.$message({
                type: 'success',
                message: '已取消'+msg.title
              })
            })

            
          },
          
          handleSuccess(res){
            that.$message({
                type: 'success',
                message: res.msg
              })
            that_data.fn.query()
          },
          add(){
            that_data.dialogTitle = '新增'
            that_data.form = {
              
              gold:'黄金',
            }
            that_data.dialogVisible = true
          },
          modify(row){
            that_data.dialogTitle = '编辑'
            that_data.form = row
            that_data.dialogVisible = true
          },
          async submit(formData){

            if(that_data.form.id){
              const res = await that_api.edit(that_data.form)
              that_data.dialogVisible = false
              that_data.fn.getInfo();
            }else{
                axios.post(that_data.action, formData, {
                    headers: that.header
                })
                .then(response => {
                    // 处理响应
                    that_data.dialogVisible = false
                    that_data.fn.getInfo();
                    console.log(response);
                })
                .catch(error => {
                    // 处理错误
                    console.error(error);
                });
              //const res = await that_api.add(that_data.form)
              
            }
            
          },
          async selectAllVariety(){
            const data = await that_api.selectAllVariety()
            const options = []
            data.forEach(element => {
              options.push({
                value: element,
                label: element
              })
            });
            that_data.options = options
          },
          query(){
            that_data.query.page = 1
            that_data.currentPage = 1
            that_data.fn.getInfo();
          },
          async getInfo(){
            const data = await that_api.getPage({
              ...that_data.query,
              tbFile:that_data.paramFrom})
            that_data.tableData = data.records
            that_data.total = data.total
          },
          handleSizeChange(){
            
          },
          handleCurrentChange(val){
            that_data.currentPage = val
            that_data.query.page = val
            that_data.fn.getInfo()
          },
          del(id){
            that.$confirm('你确定要删除吗?', '删除', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await that_api.del({id})
              that_data.fn.getInfo()
              
            }).catch(() => {
              that.$message({
                type: 'success',
                message: '已取消删除'
              })
            })
          }
        }
        return fn
      },
      
    }
    
  }
</script>